<div class="content">
    <div class="header">
        <h1 class="page-title">修改配置</h1>
    </div>
    <ul class="breadcrumb">
        <!--<li><a href="index.html">Home</a> <span class="divider">/</span></li>-->
        <!--<li class="active">发布文章</li>-->
    </ul>

    <div class="container-fluid">
        <div class="row-fluid">

            <div class="btn-toolbar">
                <button class="btn btn-primary" onClick="location='<?php echo url('Admin/Index/setting_list'); ?>'"><i class="icon-list"></i> 配置列表</button>
                <div class="btn-group">
                </div>
            </div>

            <div class="well">
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="home">
                        <form id="form" action="" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="set_id" value="<?php echo $setting_info['set_id']; ?>">
                            <label><?php echo $setting_info['set_desc']; ?></label>
                            <?php if( $setting_info['set_type'] == 1 ) { ?>
                                <input type="text" name="set_value" value="<?php echo $setting_info['set_value']; ?>" class="input-xxlarge">
                            <?php } else if( $setting_info['set_type'] == 2 ) { ?>
                                <input type="file" id="uploadphoto" name="set_value_album" >
                                <input style="display: none;" id="set_img_base64" name="set_img_base64" type="text">
                                <br>
                                <img id="set_img" src="<?php echo base_url.$setting_info['set_value']; ?>" alt="">

                                <!--图片裁剪功能-->
                                <link rel="stylesheet" type="text/css" href="<?php echo base_url; ?>plugin/tailor/css/cropper.css">
                                <script src="<?php echo base_url; ?>plugin/localResizeIMG/js/LocalResizeIMG.js"></script>
                                <script src="<?php echo base_url; ?>plugin/tailor/js/cropper.js"></script>
                                <div class="image-editor img-container">
                                    <img  src="">
                                    <div class="btn btn-primary" style="display:none;" id="tailor">保存</div>
                                </div>
                                <script>
                                    $(document).ready(function(e) {
                                        $('#uploadphoto').localResizeIMG({
                                            width: 400,
                                            quality: 1,
                                            success: function (result) {
                                                $('#submit').hide()
                                                $('#tailor').show()
                                                var $image = $('#set_img');
                                                $image.attr("src", '');
                                                $image.attr("src", result.base64);
                                                $('.cropper-view-box img').attr('src',result.base64);
                                                $('.cropper-canvas img').attr('src',result.base64);

                                                $image.on("load", function() {        // 等待图片加载成功后，才进行图片的裁剪功能
                                                    $image.cropper({
                                                        aspectRatio: 1 / 1,　　// 1：1的比例进行裁剪，可以是任意比例，自己调整
                                                        cropBoxResizable :false,
                                                        cropBoxMovable :false,
                                                        movable:true,
                                                        resizable:true,
                                                        dragCrop:false
                                                    });
                                                })

                                                //点击裁剪
                                                $("#tailor").on("click", function() {
                                                    var src = $image.eq(0).attr("src");
                                                    var canvasdata = $image.cropper("getCanvasData");

                                                    var cropBoxData = $image.cropper('getCropBoxData');
                                                    convertToData(src, canvasdata , cropBoxData, function(basechar) {
                                                        $('#set_img_base64').val(basechar.replace(/^data:image\/(png|jpg);base64,/, ""))
                                                        $('#submit').click()
                                                    });
                                                })

                                                function convertToData(url, canvasdata, cropdata, callback) {
                                                    var cropw = cropdata.width; // 剪切的宽
                                                    var croph = cropdata.height; // 剪切的宽
                                                    var imgw = canvasdata.width; // 图片缩放或则放大后的高
                                                    var imgh = canvasdata.height; // 图片缩放或则放大后的高

                                                    var poleft = canvasdata.left - cropdata.left; // canvas定位图片的左边位置
                                                    var potop = canvasdata.top - cropdata.top; // canvas定位图片的上边位置

                                                    var canvas = document.createElement("canvas");
                                                    var ctx = canvas.getContext('2d');

                                                    canvas.width = cropw;
                                                    canvas.height = croph;

                                                    var img = new Image();
                                                    img.src = url;
                                                    img.setAttribute('crossOrigin','anonymous');
                                                    img.onload = function() {
                                                        this.width = imgw;
                                                        this.height = imgh;

                                                        // 这里主要是懂得canvas与图片的裁剪之间的关系位置
                                                        ctx.drawImage(this, poleft, potop, this.width, this.height);
                                                        var base64 = canvas.toDataURL('image/jpg', 1);  // 这里的“1”是指的是处理图片的清晰度（0-1）之间，当然越小图片越模糊，处理后的图片大小也就越小
                                                        callback && callback(base64)      // 回调base64字符串
                                                        $('.cover').attr("src",base64);
                                                        $('.cover').attr('style','');
                                                        $pic=base64.replace(/^data:image\/(png|jpg);base64,/, "");
                                                    }
                                                }
                                            }
                                        });

                                    });

                                </script>
                            <?php } else if( $setting_info['set_type'] == 3 ) { ?>
                                <textarea name="set_value" cols="50" rows="8" id="content"><?php echo $setting_info['set_value']; ?></textarea>
                            <?php } ?>
                            <label></label>
                            <input class="btn btn-primary" id="submit" type="submit" value="提交" />
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">Delete Confirmation</h3>
                </div>
                <div class="modal-body">
                    <p class="error-text"><i class="icon-warning-sign modal-icon"></i>Are you sure you want to delete the user?</p>
                </div>
                <script src="<?php echo base_url;  ?>/plugin/ckeditor/ckeditor.js"></script>
                <script>
                    $(function (){
                        CKEDITOR.replace( 'content',{height:300,width:800,pages:false,subtitle:false,textareaid:'content',module:'',catid:'',
                            flashupload:true,alowuploadexts:'',allowbrowser:'1',allowuploadnum:'10',authkey:'c8e07e653e467f2f1b2058ee44db799c',
                            filebrowserUploadUrl : '/index.php?m=attachment&c=attachments&a=upload&module=&catid=&dosubmit=1',
                            toolbar :
                                [
                                    [ 'Source','-','Save','NewPage','DocProps','Preview','-','Templates' ],
                                    [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],
                                    [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
                                    [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ],
                                    [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ],
                                    [ 'Styles','Format','Font','FontSize' ],
                                    [ 'TextColor','BGColor' ]
                                ]
                        });

                    })
                </script>